<template>
	<view class="page-wrap">
		<view class="video-box" @click="videoTap">
			<video class="video" id="myVideo" ref="myVideo" :controls="false" loop :src="fromData.dataHumanVideo" :show-fullscreen-btn="false"
				poster="https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg3.jpg"></video>
			<image class="video-veil" src="https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/video-veil.png" mode=""></image>
		</view>
		<view class="bg">
			<view class="bg-center">
				<view class="card style-item fboxCol Ycenter">
					<view class="hd font36 font-weight">选择样式</view>
					<view class="bd fboxRow Ycenter">
						<view class="style" v-for="(item,index) in list" :key="index" @click="styleTap(item)"
							:class="{'active': fromData.styleId == item.key}">
							<image class="pic" :src="item.img" mode=""></image>
						</view>
					</view>
				</view>
				<view class="card fboxCol Ycenter font28">
					<view class="hd font36 font-weight">上传照片</view>
					<view class="bd fboxCol mt30 Ycenter">
						<view class="upload fboxCol Ycenter Xcenter" v-if="!fromData.dataHumanFace" @click="changePic">
							<u-icon name="plus" size="20" color="#d75d56"></u-icon>
							<view class="font24 mt10">点击上传</view>
						</view>
						<view class="face" v-else><image class="face" :src="fromData.dataHumanFace" mode=""></image></view>
						
							<!-- <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
								:maxCount="1">
							
							</u-upload> -->
						<view class="tips mt20 font24">（请上传正面形象照用于制作数字人）</view>
					</view>
				</view>
				<view class="card fboxCol Ycenter font28">
					<view class="hd font36 font-weight">您的名字</view>
					<view class="bd bg-con mt30">
						<input class="uni-input" placeholder="请输入您的姓名" placeholder-style="color:#d75d56"
							v-model="fromData.realName" @change="nameChange" />
					</view>
				</view>
				<view class="card blessing fboxCol Ycenter font28">
					<view class="hd font36 font-weight">新年祝福词</view>
					<view class="radio-group mt30">
						<radio-group class="fboxRow Ycenter" v-model="fromData.dataHumanAudioType"
							@change="radioChange">
							<label class="radio fboxRow Ycenter" style="margin-right: 30rpx;">
								<radio color="#b03730" style="transform: scale(.6);" value="1" :checked="fromData.dataHumanAudioType==1" />自定义编辑
							</label>
							<label class="radio fboxRow Ycenter">
								<radio color="#b03730" style="transform: scale(.6);" value="2" :checked="fromData.dataHumanAudioType==2" />模板原声
							</label>
						</radio-group>
					</view>
					<view class="bd bg-con fboxCol mt30" v-if="fromData.dataHumanAudioType == 1">
						<textarea class="uni-textarea" placeholder-style="color:#d75d56" placeholder="请输入新年祝福词"
							v-model="fromData.dataHumanText" :maxlength="25" />
						<!-- <view class="count fboxRow Xend font24">{{fromData.dataHumanText.length}} /25</view> -->
					</view>
					<view class="ft mt20">
						<view class="random fboxRow Ycenter color-999796 font28" @click="randomTap(2)">
							<view class="icon"></view> 随机生成祝福词
						</view>
					</view>
				</view>
				<view class="card industry fboxCol Ycenter font28" @click="isIndustry = true">
					<view class="hd font36 font-weight">所属行业</view>
					<view class="bd bg-con mt30 fboxRow Ycenter Xcenter">
						<input class="uni-input" placeholder="请选择您的所属行业" placeholder-style="color:#d75d56" disabled
							v-model="fromData.industry" @change="nameChange" />
					</view>
				</view>
			</view>
			<view class="bg-bottom"></view>

			<view class="fixed-space"></view>
			<view class="fixed-bottom fboxRow Ycenter Xcenter">
				<view class="fixed-btn fboxRow Ycenter Xcenter font36" @click="userEdit">生成拜年数字人名片</view>
				<!-- <view class="fixed-btn fboxRow Ycenter Xcenter font32 font-white bg-F9741B-FF3D15" @click="getMobile">确定并生成数字人名片</view>
			<view class="fixed-btn fboxRow Ycenter Xcenter font32 font-white bg-F9741B-FF3D15" @click="getMobile">正在合成...(9%)</view> -->
			</view>
		</view>
		<u-picker ref="uPicker" confirmColor="#cf2920" :show="isIndustry" :loading="loading" :columns="columns"
			keyName="industryName" :closeOnClickOverlay="true" @close="closeIndustry" @confirm="confirmIndustry"
			@cancel="closeIndustry" @change="industryChange"></u-picker>
	</view>
</template>

<script>
	import {
		getIndustryList,
		fileUploadAnon,
		addUpdateDigital,
		digitalPersonInfo
	} from '@/api/index.js';
	export default {
		data() {
			return {
				isIndustry: false,
				list: [{
						title: '数字人名片（男1）',
						img: 'https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg4.jpg',
						key: 'STYLE_DATA_HUMAN1'
					},
					{
						title: '数字人名片（男2）',
						img: 'https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg3.jpg',
						key: 'STYLE_DATA_HUMAN2'
					},
					{
						title: '数字人名片（女1）',
						img: 'https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg4.jpg',
						key: 'STYLE_DATA_HUMAN3'
					},
					{
						title: '数字人名片（女2）',
						img: 'https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg3.jpg',
						key: 'STYLE_DATA_HUMAN4'
					}
				],
				columns: [],
				loading: false,
				fromData: {
					"dataHumanAudioType": 2,
					"dataHumanFace": "",
					"dataHumanText": "",
					"industry": "",
					industryId: '',
					"realName": "",
					"styleId": ""
				},
				// file: null,
				fileList: [],
				blessing: [
					'XXX给您拜年了，在新的一年，祝愿大家：万事胜意，平安喜乐。',
					'XXX给您拜年了，愿您新年胜旧年，烟火向星辰，所愿皆成真。',
					'XXX给您拜年了，愿您所得皆所期，所求皆如愿，所行化坦途。',
					'XXX给您拜年了，祝您新年胜旧年，欢愉且胜意，万事尽可期。',
					'XXX给您拜年了，新的一年携全家祝您，新年快乐！事事顺意！',
				],
				memberId: ''
			}
		},
		onLoad(option) {
			this.getInit()
			if(option.isExist == 1 && option.id){
				this.memberId = option.id
				this.getDetail()
			}
		},
		methods: {
			getInit() {
				getIndustryList().then(res => {
					this.columns = [res.data, res.data[0].children]
				})
			},
			getDetail(){
				digitalPersonInfo({ memberId: this.memberId }).then(res=>{
					this.fromData = res.data
				})
			},
			industryChange(e) {
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				const {
					columnIndex,
					index,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					// 模拟网络请求
					picker.setColumnValues(1, this.columns[0][index].children)
					this.loading = false
				}
			},
			closeIndustry() {
				this.isIndustry = false
			},
			confirmIndustry(e) {
				console.log(e)
				this.fromData.industry = e.value[1].industryName
				this.fromData.industryId = e.value[0].industryId, e.value[1].industryId
				this.closeIndustry()
			},
			loadVideo(e) {
				console.log('loadVideo')
				console.log(e)
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.videoContext.play(); // 播放
				this.pause = false
			},
			videoTap() {
				this.videoContext = uni.createVideoContext('myVideo', this);
				if (this.pause) {
					this.videoContext.pause(); // 暂停
					this.pause = false
				} else {
					this.videoContext.play(); // 播放
					this.pause = true
				}
			},
			randomTap(type) {
				const randNum = Math.floor(Math.random() * 5);
				const  text = this.blessing[randNum]
				if(this.fromData.realName){
					this.fromData.dataHumanText = this.fromData.realName + text.substr(3,text.length)
				}else{
					if(type == 2){
						uni.showToast({
							icon: 'none',
							title:'请输入您的名字'
						})
					}
				}
			},
			radioChange(e) {
				this.fromData.dataHumanAudioType = e.detail.value
				if(e.detail.value == 1){
					this.randomTap(1)
				}
			},
			changePic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: (res) => {
						console.log(res)
						this.file = res.tempFilePaths[0]
						this.fromData.dataHumanFace = res.tempFilePaths[0]
						
						// fileUploadAnon(res.tempFilePaths[0]).then(res=>{
						// 	console.log(res)
						// })
						// uni.uploadFile({
						// 	url: 'http://ebc-test.benwunet.com/api/oss/file-anon/upload', //仅为示例，非真实的接口地址
						// 	filePath: res.tempFilePaths[0],
						// 	name: 'file',
						// 	success: (uploadFileRes) => {
						// 		console.log(uploadFileRes.data);
						// 	}
						// });
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			
			async afterRead(event) {
				console.log(event)
				this.fileList = [{url}]
				this.fromData.dataHumanFace = event.file.url
			},
			deletePic() {
				this.fileList = []
				this.fromData.dataHumanFace = ''
			},
			getMobile() {
				// #ifdef H5
				this.$pageTo('/mine/mobile')
				// #endif
				// #ifdef MP
				console.log(1111111111)
				// #endif

			},
			Verification() {
				const {
					dataHumanAudioType,
					dataHumanFace,
					dataHumanText,
					industry,
					realName,
					styleId
				} = this.fromData
				if (!styleId) {
					uni.showToast({
						icon: 'none',
						title: '请选择样式'
					})
					return false
				}
				if (!dataHumanFace) {
					uni.showToast({
						icon: 'none',
						title: '请上传正面形象照'
					})
					return false
				}
				if (!realName) {
					uni.showToast({
						icon: 'none',
						title: '请输入您的名字'
					})
					return false
				}
				if (!industry) {
					uni.showToast({
						icon: 'none',
						title: '请选择所属行业'
					})
					return false
				}
				if(dataHumanAudioType == 1 && !dataHumanText) {
					uni.showToast({
						icon: 'none',
						title: '请输入或者随机生成祝福词'
					})
					return false
				}
				return true
			},
			userEdit() {
				if (this.Verification()) {
					try {
						// 获取token
						if (uni.getStorageSync('bw_params')) {
							let token = JSON.parse(uni.getStorageSync('bw_params'));
							if (typeof(token.access_token) != "undefined") {
								// 根据token查询用户信息
								if(this.file && this.fromData.dataHumanFace){
									fileUploadAnon(this.file).then(res=>{
										if(res.data.url){
											this.fromData.dataHumanFace = res.data.url
											this.postSubmit()
										}
									})
								}else{
									this.postSubmit()
								}
							}
						}else{
							this.$pageTo('/mine/mobile')
						}
					} catch (e) {
						// error
						console.log(e)
					}
				}
			},
			postSubmit(){
				addUpdateDigital(this.fromData).then(res=>{
					console.log(res)
					if(res.data){
						uni.navigateTo({
							url: '/CardDetail?id='+res.data.memberId
							// url: '/card/detail?id='+res.data.memberId
						})
					}
				})
			},
			styleTap(item) {
				this.fromData.styleId = item.key
			}
		}
	}
</script>

<style scoped>
	.video-box {
		position: relative;
		width: 750rpx;
		height: 664rpx;
		background-color: #6d0d12;
	}

	.video-box .video {
		position: relative;
		width: 750rpx;
		height: 664rpx;
		z-index: 0;
	}

	.video-box .video-veil {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		width: 750rpx;
		height: 664rpx;
	}

	.bg {
		padding-top: 186rpx;
		background: #c33620 url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg.jpg') no-repeat top center;
		background-size: 750rpx auto;
		overflow: hidden;
	}

	.bg-center {
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-1.png') repeat-y top center;
		background-size: 750rpx auto;
		overflow: hidden;
	}

	.bg-bottom {
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-2.png') no-repeat bottom center;
		width: 750rpx;
		height: 137rpx;
		background-size: 750rpx auto;
	}

	.hd {
		color: #cf2920;
		position: relative;
	}

	.hd::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -70rpx;
		width: 140rpx;
		height: 11rpx;
		;
		background-color: rgba(197, 46, 37, .3);
	}

	.card {
		margin-top: 50rpx;
	}

	.card:first-child {
		margin-top: 0;
	}


	.style-item .style {
		margin: 0 6rpx;
		width: 112rpx;
		height: 112rpx;
		border: 6rpx solid transparent
	}

	.style-item .pic {
		width: 100rpx;
		height: 100rpx
	}

	.style-item .active {
		border: 6rpx solid #ffaf15;
	}

	.style-item .bd {
		margin-top: 24rpx;
	}

	.tips {
		color: #d75d56
	}

	.avatar {
		width: 168rpx;
		height: 168rpx;
	}

	.upload {
		width: 168rpx;
		height: 168rpx;
		background-color: #fdead5;
		color: #d75d56
	}
	.face {
		width: 168rpx;
		height: 168rpx;
		background-color: #fdead5;
		color: #d75d56
	}

	.bg-con {
		padding: 50rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-3.png') no-repeat center center;
		width: 540rpx;
		height: 137rpx;
		background-size: 540rpx 137rpx;
	}

	.blessing .bg-con {
		background-image: url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-4.png');
		height: 274rpx;
		background-size: 540rpx 274rpx;
	}

	.radio-group {
		color: #b03730
	}

	.radio-group /deep/ .uni-radio-input {
		background: none;
		border-color: #b03730;
	}

	.blessing .uni-textarea {
		width: 440rpx;
		line-height: 50rpx;
		background: none;
		color: #b03730
	}

	.blessing .uni-input {
		color: #b03730
	}

	.blessing .count {
		color: #a65250;
	}

	.blessing .random {
		color: #b03730
	}

	.bg-con /deep/ .input-placeholder {
		text-align: center;
		color: #d75d56
	}

	.bg-con /deep/ .uni-input-input {
		color: #b03730;
		text-align: center;
	}


	.fixed-space {
		height: 160rpx;
	}

	.fixed-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.fixed-bottom .fixed-btn {
		background: #c33620 url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-btn.jpg') no-repeat top center;
		background-size: 750rpx auto;
		width: 750rpx;
		height: 160rpx;
		color: #fcddb7
	}
</style>
